<template>
	<view>
		<view class="UCenter-bg" catchtap='toMy_detail'>
			<image :src="'http://39.96.88.209:8080'+avarUrl" class="png"></image>
			<view class="text-xl">
				<!-- <text>Amibition</text>   -->
			</view>
			<view class="margin-top-sm">
				<text>{{uname}}</text>
			</view>
			<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image>
		</view>
		<!-- 用户信息end -->

		<view class="padding flex text-center text-grey bg-white shadow-warp">

			<view class="flex flex-sub flex-direction solid-right" bindtap='toPraise'>
				<view class="text-xxl text-orange">{{workNum}}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-attentionfill"></text>作业</view>
			</view>
			<view class="flex flex-sub flex-direction solid-right" bindtap='toAttention'>
				<view class="text-xxl text-blue">{{qiandaoNum}}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-favorfill"></text>签到</view>
			</view>
			<view class="flex flex-sub flex-direction" bindtap='toFans'>
				<view class="text-xxl text-green">{{answerNum}}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-fork"></text>答题</view>
			</view>

		</view>


		<!-- 设置详细 -->
		<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius" @click="restpassword">
			<view class="cu-item arrow">
				<navigator hover-class="none" url="/pages/changePwd/changePwd">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">修改密码</text>
					</button>
				</navigator>
			</view>
		</view>
		
		<view class="cu-list menu card-menu shadow-lg radius" @click="back">
			<view class="cu-item arrow">
				<navigator hover-class="none" url="/pages/login/login">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">退出登陆</text>
					</button>
				</navigator>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
		<!-- 设置详细end -->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				workNum: 0,
				qiandaoNum: 0,
				answerNum: 0,
				avarUrl: '',
				uname:''
			}
		},
		onLoad() {
			this.init()
			this.avarUrl =  uni.getStorageSync('user_info').headImg
			this.uname = uni.getStorageSync('user_info').userName
			console.log(this.avarUrl)
		},
		methods: {
			back(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			restpassword(){
				uni.navigateTo({
					url:'/pages/changePwd/changePwd'
				})
			},
			init() {
				var _this = this;
				var id = uni.getStorageSync('user_info').id
				uni.request({
					url: _this.api + "/user/avg", //登陆
					method: "POST",
					data: {
						id: id
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						
						if (res.data.code == "200") {
							console.log(res)
							_this.workNum = res.data.data.workNum
							_this.qiandaoNum = res.data.data.qianNum
							_this.answerNum = res.data.data.answerNum
						}


					},
					fail: (err) => {
						uni.showToast({
							title: "登陆失败请稍后在试！",
							icon: 'none',
							duration: 1000
						})
					}
				})

			}
		}
	}
</script>

<style>
	/* pages/my/my.wxss */
	/* 用户信息 */


	.UCenter-bg {
		background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
		background-size: cover;
		height: 450rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}

	.text-xl image {
		height: 100rpx;
		width: 100rpx;
	}

	.png {

		border-radius: 100%;
	}


	.num {
		direction: rtl;
		margin-left: 68%;
		font-size: 25rpx;
	}
</style>
